<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-10-09 15:16:35
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-11-22 15:16:22
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-10-09 15:16:35
-->
<template>
  <button :class="cls" @click="onclick">
    <view v-if="loading || $slots.icon" :class="`${prefixCls}-icon`">
      <!-- <icon-loading v-if="loading" :spin="true" /> -->
      <!-- <slot v-else name="icon" /> -->
      <slot name="icon"></slot>
    </view>
    <slot />
  </button>
</template>

<script lang="ts">
import { computed, defineComponent } from "vue";

const AButton = defineComponent({
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  name: "AButton",
  props: {
    type: {
      type: String,
      default: void 0,
    },
    shape: {
      type: String,
      default: "square",
    },
    status: {
      type: String,
      default: "normal",
    },
    size: {
      type: String,
      default: "normal",
    },
    long: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
    },
    htmlType: {
      type: String,
      default: "button",
    },
  },
  emits: ["click"],
  setup(props, { emit, slots }) {
    const prefixCls = "arco-btn";
    const cls = computed(() => {
      return [
        prefixCls,
        "arco-btn-size-medium",
        `${prefixCls}-${props.type != null ? props.type : "secondary"}`,
        `${prefixCls}-shape-${props.shape}`,
        `${prefixCls}-status-${props.status != null ? props.status : "normal"}`,
        {
          [`${prefixCls}-long`]: props.long,
          [`${prefixCls}-loading`]: props.loading,
          [`${prefixCls}-disabled`]: props.disabled,
          [`${prefixCls}-only-icon`]: slots.icon && !slots.default,
        },
      ];
    });
    function onclick() {
      emit("click");
    }
    return {
      cls,
      prefixCls,
      onclick,
    };
  },
});
export default AButton;
</script>
